<template>
	<view class="recommend-container">
		<CommonBack @back="back" title="新课推荐"></CommonBack>
		<!-- 搜索区域 -->
		<view class="recommend-search">
			<u--input @clear="clear" clearable shape="circle" placeholder="请输入课程名称" border="surround"
				v-model="searchName">
			</u--input>
			<u-button @click="search" icon="search" color="#3F7BED" iconColor="#fff" shape="circle"
				style="width: 60rpx;height: 60rpx;margin-left: 40rpx;"></u-button>
		</view>
		<!-- 推荐内容区域 -->
		<view class="recommend-warp">
			<view class="warp-item c-theme-btn-w" v-for="item in course" :key="item.id" >
				<view class="left" style="display: flex;flex: 3;">
					<image src="../../static/imgs/recommend1.png" mode="widthFix"></image>
					<view class="course-info">
						<view class="name">{{item.title}}</view>
						<view class="teacher">
							<text @click="details(item.id)">授课：{{item.author}}</text>
							<image @click="changeBuy(item)"
								:src="item.isBuy===true?'../../static/imgs/del.png':'../../static/imgs/add.png'" mode=""
								style="width: 24rpx;height: 24rpx;"></image>
						</view>
						<view class="price">￥{{item.price}}</view>
					</view>
				</view>
				<view class="buy-btn">
					<view class="btn c-theme-btn-b" @click="buyCourse(item.id)">{{item.sub?'已购买':'购买'}}</view>
					<view class="collect">
						<image @click="collect(item)"
							:src="item.collected?'../../static/imgs/collect.png':'../../static/imgs/details-collect.png'"
							style="width: 30rpx;height: 30rpx;margin-right: 40rpx;"></image>
						<image src="../../static/imgs/share.png" style="width: 27rpx;height: 30rpx;"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入公共返回组件
	import CommonBack from "@/components/CommonBack.vue"
	import {
		courseList,
		buy,
		courseCollet
	} from "@/api/course.js"
	import {
		TOAST
	} from "@/utils/utils.js"
	export default {
		components: {
			CommonBack
		},
		data() {
			return {
				searchName: "",
				course: [],
				addShow: false
			};
		},
		methods: {
			back() {
				uni.switchTab({
					url: "../index/index"
				})
			},
			// 获取课程数据
			getCourseList() {
				courseList().then(res => {
					this.course = res.data.records
					this.course.forEach(item => {
						item.isBuy = false
					})
				})
			},
			search() {
				courseList({
					title: this.searchName
				}).then(res => {
					this.course = res.data.records
				})
			},
			buyCourse(id) {
				buy({
					productId: id
				}).then(res => {
					if (res.code === 200) {
						TOAST("购买成功")
						this.getCourseList()
					}
				})
			},
			collect(val) {
				courseCollet({
					productId: val.id,
					status: val.collected ? 0 : 1
				}).then(res => {
					if(res.code===200){
						TOAST("操作成功")
						this.getCourseList()
					}
				})
			},
			changeBuy(val) {
				this.course.forEach(item => {
					if (item.id === val.id) {
						item.isBuy = !item.isBuy
					}
				})
			},
			clear() {
				this.getCourseList()
			},
			details(id){
				uni.navigateTo({
					url:"/pages/index/details?id="+id
				})
			}
		},
		onShow() {
			this.getCourseList()
		},
		watch: {
			course: {
				immediate: true,
				deep: true,
				handler(newval, oldval) {
					this.course = newval
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recommend-container {
		padding: 100rpx 60rpx;

		.recommend-search {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40rpx 0;
		}

		.recommend-warp {
			.warp-item {
				display: flex;
				padding: 30rpx 20rpx;
				background-color: #F4F6F8;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 2rpx solid #FFFFFF;
				margin-bottom: 20rpx;

				image {
					width: 120rpx;
				}

				.course-info {
					display: flex;
					flex-direction: column;
					margin-left: 10rpx;

					.name {
						font-size: 28rpx;
						font-weight: bold;
						color: #3D5464;
					}

					.teacher {
						display: flex;
						align-items: center;
						font-size: 20rpx;

						text {
							margin-right: 20rpx;
						}

						color: #999FAD;
					}

					.price {
						font-weight: 800;
						color: #FFB300;
						font-size: 28rpx;
					}

				}

				.buy-btn {
					margin-left: 40rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					.btn {
						width: 160rpx;
						height: 50rpx;
						text-align: center;
						line-height: 50rpx;
						background: #3F7BED;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>
